﻿<link href="/Content/js/tabber/example.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/Content/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/Content/js/tabber/tabber-minimized.js"></script>

<script type="text/javascript">
    tinyMCE.init({
        mode: "exact",
        elements: "fullDesc"
    });
</script>
<script>
    $(document).ready(function () {
        $('#alsoLike').dataTable({
            "bProcessing": true,
            "sAjaxSource": '/Content/json/product.txt',
            "bSort": false,
            "bFilter": false,
            "bLengthChange": false,
            "aoColumns": [
                 { "mDataProp": "No", "sTitle": "No.", "sWidth": "50px" },
                 { "mDataProp": "Photo", "sTitle": "Photo", "sWidth": "80px",
                     "fnRender": function (o, val) {
                         return "<div class='prdThumb60'><img src='" + val + "' /></div>";
                     }
                 },
                 { "mDataProp": "Name", "sTitle": "Name" },
                 { "mDataProp": "List Price", "sTitle": "List Price", "sWidth": "70px" },
                 { "mDataProp": "Special Price", "sTitle": "Special Price", "sWidth": "70px" },
                 { "mDataProp": "Status", "sTitle": "Status", "sWidth": "100px" },
                 { "mDataProp": null, "sTitle": "Action", "sWidth": "100px",
                     "fnRender": function (o, val) {
                         return "<a href='#'>Delete</a>";
                     }
                 }
            ]
        });

        $('#catMap').dataTable({
            "bProcessing": true,
            "sAjaxSource": '/Content/json/catMap.txt',
            "bSort": false,
            "bFilter": false,
            "bLengthChange": false,
            "aoColumns": [
                { "mDataProp": "ID", "sTitle": "ID", "sWidth": "20px" },
                { "mDataProp": "Name", "sTitle": "Name" },
                { "mDataProp": "Status", "sTitle": "Status", "sWidth": "100px" },
                { "mDataProp": null, "sTitle": "Action", "sWidth": "100px",
                    "fnRender": function (o, val) {
                        return "<a href='#'>Delete</a>";
                    }
                }
            ]
        });
    });
</script>
<div class="grid_14">
    <a href="/">Home</a> &gt; <a href="/Product">Product</a> &gt; Edit
    <hr />
</div>
<div class="grid_14">
    <div class="box">
        <h2>Product Edit</h2>
        <div class="tabber">
            <div class="tabbertab" title="Base Information">
                <table class="width300">
                    <tr>
                        <th width="100">Name:</th><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>List Price:</th><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Short Description:</th><td><textarea id="desc"></textarea></td>
                    </tr>
                    <tr>
                        <th>Weight / Size:</th><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Full Description:</th><td><textarea style="width:100%;height:400px;" id="fullDesc"></textarea></td>
                    </tr>
                    <tr>
                        <th>Photo:</th>
                        <td>
                            <p><input type="file" /><input type="button" value="Upload" /></p>
                            <div class="left center"><div class="prdThumb60"><img src="/Content/img/prod1.jpg" /></div>&nbsp;<br /><a href="#">Delete</a></div>
                            <div class="left center"><div class="prdThumb60"><img src="/Content/img/prod2.jpg" /></div>&nbsp;<br /><a href="#">Delete</a></div>
                            <div class="left center"><div class="prdThumb60"><img src="/Content/img/prod3.jpg" /></div>&nbsp;<br /><a href="#">Delete</a></div>
                            <div class="left center"><div class="prdThumb60"><img src="/Content/img/prod4.png" /></div>&nbsp;<br /><a href="#">Delete</a></div>
                            <div class="left center"><div class="prdThumb60"><img src="/Content/img/prod5.png" /></div>&nbsp;<br /><a href="#">Delete</a></div>
                        </td>
                    </tr>
                    <tr>
                        <th>Published:</th><td><input type="checkbox" checked="checked" /></td>
                    </tr>
                    <tr>
                        <th></th><td><input type="submit" value="Submit" /></td>
                    </tr>
                </table>
            </div>
            <div class="tabbertab" title="Weight / Size">
                <table>
                    <tr>
                        <th width="100"></th><th width="200">Metric</th><th>Imperial</th>
                    </tr>
                    <tr>
                        <th>Net Weight:</th><td><input type="text"/></td><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Gross Weight:</th><td><input type="text"/></td><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Size (L):</th><td><input type="text"/></td><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Size (W):</th><td><input type="text"/></td><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Size (H):</th><td><input type="text"/></td><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th></th><td colspan="2"><input type="submit" value="Submit" /></td>
                    </tr>
                </table>
            </div>
            <div class="tabbertab" title="Member's Price">
                <table>
                    <tr>
                        <th width="100">Basic Price:</th><td>$<input type="text"/></td></td>
                    </tr>
                    <tr>
                        <th>Silver Price:</th><td>$<input type="text"/></td></td>
                    </tr>
                    <tr>
                        <th>Gold Price:</th><td>$<input type="text"/></td></td>
                    </tr>
                    <tr>
                        <th>Platium Price:</th><td>$<input type="text"/></td></td>
                    </tr>
                    <tr>
                        <th></th><td><input type="submit" value="Submit" /></td>
                    </tr>
                </table>
            </div>
            <div class="tabbertab" title="Category Mapping">
                <p class="right"><b><a href="#">Add New CATEGORY MAPPING</a></b></p>
                <table id="catMap"></table>
                <div class="clear"></div>
            </div>
            <div class="tabbertab" title="Promotion">
                <table class="width300">
                    <tr>
                        <th>Special Price:</th><td><input type="text"/></td>
                    </tr>
                    <tr>
                        <th>Promotion:</th>
                        <td class="middle">
                            <input type="checkbox"/>New Arrival&nbsp;
                            <input type="checkbox"/>On Sale&nbsp;
                            <input type="checkbox"/>Hot Items&nbsp;
                            <input type="checkbox"/>Clearance&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <th></th><td><input type="submit" value="Submit" /></td>
                    </tr>
                </table>
            </div>
            <div class="tabbertab" title="You May Also Like">
                <p class="right"><b><a href="#">Add New You MAY ALSO LIKE Product</a></b></p>
                <table id="alsoLike"></table>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>